<template>
  <div class="w750">
    <!-- 我的推广 -->
    <div class="pre-deposit">
      <div class="noCommisSts" v-if="myPromoterData.commisSts == 0">
        <div class="bgTips"></div>
        该用户分享提成功能未开启，请联系商城客服！
      </div>
      <div class="balance">
        <span class="pre-bg"
          ><img
            :src="
              myPromoterData.commisSts == 1
                ? require('@/assets/images/extension-bg.jpg')
                : require('@/assets/images/extension-red.jpg')
            "
            alt=""
        /></span>
        <span class="txt">累计获得佣金(元)</span>
        <p class="num">
          <span class="price">{{
            Money(myPromoterData.totalDistCommis)[0]
          }}</span
          >.{{ Money(myPromoterData.totalDistCommis)[1] }}
        </p>
      </div>
      <div class="state">
        <div class="item">
          <span class="num"
            ><span class="price">{{
              Money(myPromoterData.settledDistCommis)[0]
            }}</span
            >.{{ Money(myPromoterData.settledDistCommis)[1] }}</span
          >
          <span class="txt">已结算奖励(元)</span>
        </div>
        <div class="item">
          <span class="num"
            ><span class="price">{{
              Money(myPromoterData.unsettleDistCommis)[0]
            }}</span
            >.{{ Money(myPromoterData.unsettleDistCommis)[1] }}</span
          >
          <span class="txt">未结算奖励(元)</span>
        </div>
      </div>
      <div class="entry-con mt10">
        <router-link to="/myExtension/toApplyCash">
          <div class="con-box clearfix">
            <div class="fl">
              <span class="entry-icon"
                ><img
                  src="../../../assets/images/pre-icon02.png"
                  alt="" /></span
              ><span class="entry-name">佣金提现</span>
            </div>
            <div class="fr">
              <span class="entry-txt"
                >可提现<span class="price"
                  >&#65509;{{ Money(myPromoterData.settledDistCommis)[0] }}.{{
                    Money(myPromoterData.settledDistCommis)[1]
                  }}</span
                ></span
              >
              <em class="arr"
                ><img src="../../../assets/images/arrow.png" alt=""
              /></em>
            </div>
          </div>
        </router-link>
      </div>
      <div class="entry-con">
        <router-link to="/myExtension/extensionRule">
          <div class="con-box clearfix">
            <div class="fl">
              <span class="entry-icon"
                ><img
                  src="../../../assets/images/int-icon00.png"
                  alt="" /></span
              ><span class="entry-name">推广规则</span>
            </div>
            <div class="fr">
              <em class="arr"
                ><img src="../../../assets/images/arrow.png" alt=""
              /></em>
            </div>
          </div>
        </router-link>
      </div>
      <div class="entry-con">
        <router-link to="/myExtension/extensionAchievement">
          <div class="con-box clearfix">
            <div class="fl">
              <span class="entry-icon"
                ><img
                  src="../../../assets/images/ext-icon01.png"
                  alt="" /></span
              ><span class="entry-name">我推广的好友</span>
            </div>
            <div class="fr">
              <em class="arr"
                ><img src="../../../assets/images/arrow.png" alt=""
              /></em>
            </div>
          </div>
        </router-link>
      </div>
      <div class="entry-con">
        <router-link to="/myExtension/extensionWithdraw">
          <div class="con-box clearfix">
            <div class="fl">
              <span class="entry-icon"
                ><img
                  src="../../../assets/images/pre-icon04.png"
                  alt="" /></span
              ><span class="entry-name">提现记录</span>
            </div>
            <div class="fr">
              <em class="arr"
                ><img src="../../../assets/images/arrow.png" alt=""
              /></em>
            </div>
          </div>
        </router-link>
      </div>
      <div class="entry-con">
        <router-link to="/myExtension/extensionDet">
          <div class="con-box clearfix">
            <div class="fl">
              <span class="entry-icon"
                ><img
                  src="../../../assets/images/pre-icon03.png"
                  alt="" /></span
              ><span class="entry-name">佣金明细</span>
            </div>
            <div class="fr">
              <em class="arr"
                ><img src="../../../assets/images/arrow.png" alt=""
              /></em>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <!-- /我的推广 -->
  </div>
</template>

<script>
// extensionApi
import cash from "utils/tool";
import { myPromoter } from "api/extensionApi";
export default {
  data() {
    return {
      Money: cash,
      myPromoterData: "",
    };
  },
  mounted() {
    let that = this;

    myPromoter().then((res) => {
      //获取myPromoter接口数据
      if (res.status == 1) {
        this.myPromoterData = res.result;
      } else {
        this.$toast({ duration: 3000, message: res.msg });
      }
    }),
      () => {
        this.$toast("获取数据失败");
      };
  },
};
</script>

<style src="../../../assets/css/pre-deposit.css" scoped></style>
<style scoped>
.noCommisSts {
  color: #f6990b;
  font-size: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
  background: url("../../../assets/images/bg_tips.png") left -60px no-repeat #fff7ea;
  padding-left: 20px;
}
</style>
